import React from "react";
import './TodoList.css';
import TodoHeader from "./TodoHeader/TodoHeader";
import TodoMain from "./TodoMain/TodoMain";
import TodoFooter from "./TodoFooter/TodoFooter";
import { useEffect } from "react";
import {useDispatch} from 'react-redux';
import { asyncGetAllTodos } from "../../app/slices/todoSlice";
export default function TodoList() {
  //获取 dispatch 函数
  let dispatch = useDispatch();
  //组件挂载完毕的回调
  useEffect(() => {
    //获取所有的任务, 更新状态
    dispatch(asyncGetAllTodos());
  }, [])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader />
        <TodoMain />
        <TodoFooter />
      </div>
    </div>
  );
}
